<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/main.jsp" %>
<input type="hidden" id="current" value="${PAGE.curr_total }">
<input type="hidden" id="total" value="${PAGE.total }">
<input type="hidden" id="number" value="${PAGE.number }">
<c:forEach var="music" items="${CATE_MUSIC_CONTENT }">
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<div class="item">
			<div class="pos-rlt">
				<div class="item-overlay opacity r r-2x bg-black">
					<div class="center text-center m-t-n">
						<a href="javascript:;"  onclick="playMusic('${music.musicUri}','${music.name }','${music.author }')"><i class="fa fa-play-circle i-2x"></i></a>
					</div>
				</div>
				<a href="javascript:;"><img src="${V_PATH}${music.imgUri}" style="max-height: 181px;max-width: 121px" alt="" class="r r-2x img-full"></a>
			</div>
			<div class="padder-v">
				<a href="javascript:;" onclick="loadMusicInfo('${music.id}','${music.cateId}','${music.authorId }')" data-bjax data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">${music.name }</a>
				<a href="javascript:;" data-bjax data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">By ${music.author}</a>
			</div>
		</div>
	</div>
</c:forEach>
